<template>
    <div>
        <button class="goHome" @click="goHome">返回首页</button>
        <p>{{ $route.query.id }}</p>
        <p>{{ result.name }}</p>
        <p>{{ detail.height1 }}</p>
        <p>{{ detail.age }}</p>
        <p>{{ detail.hobby }}</p>
        <!-- <p>{{ result.detail }}</p> -->
        <!-- <p>{{ result.detail.height1 }}</p>
        <p>{{ result.detail.age }}</p>
        <p>{{ result.detail.hobby }}</p> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            studentDetail: [
                {
                    id: "01",
                    name: "王洋洋",
                    detail: {
                        height1: "180cm",
                        age1: 19,
                        hobby: "肤白貌美大长腿",
                    },
                },
                {
                    id: "02",
                    name: "刘超超",
                    detail: {
                        height1: "177cm",
                        age1: 22,
                        hobby: "爱王洋洋",
                    },
                },
                {
                    id: "03",
                    name: "刘佳宁",
                    detail: {
                        height1: "160cm",
                        age: 18,
                        hobby: "面膜",
                    },
                },
            ],
            result: {},
            detail:{}
        }
    },
    mounted() {
        console.log(this.studentDetail);
        console.log(this.$route.query.id);
        // this.result = this.studentDetail.find((item) => {
        //     return item.id == this.$route.query.id;
        // });
        // console.log(this.result);
        this.showItem(this.$route);
    },
    watch: {
        $route(value) {
            console.log(value);
            // this.result = this.studentDetail.find((item) => {
            //     return item.id == value.query.id;
            // });
            this.showItem(value);
        }
    },
    methods: {
        showItem(value) {
            this.result = this.studentDetail.find((item) => {
                return item.id == value.query.id;
            });
            // console.log(this.result);
            this.detail = this.result.detail;
        },
        goHome(){
            console.log(this.$router);
            this.$router.back();
        }
    }
}
</script>

<style lang="scss" scoped>

</style>